<div class="motopress-wrapper content-holder clearfix">
    <div class="container">
        <div class="row">
            <div class="span12" data-motopress-wrapper-file="page-Portfolio3Cols-filterable.php" data-motopress-wrapper-type="content">
                <div class="row">
                    <div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
                        <section class="title-section">
                            <h1 class="title-header">
                                Dự án</h1>

                            <ul class="breadcrumb breadcrumb__t"><li><a href="index.php">Trang chủ</a></li> <li class="divider">/</li> <li class="active">Dự án</li></ul>  
                        </section>  </div>
                </div>
                <div id="content">
                    <div data-motopress-type="loop" data-motopress-loop-file="loop/loop-portfolio3.php">
                        <div class="filter-wrapper clearfix">
                            <div class="pull-right">
                                <strong></strong>
                                <ul id="filters" class="filter nav nav-pills">
                                </ul>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <ul id="portfolio-grid" class="filterable-portfolio thumbnails portfolio-3cols isotope" data-cols="3cols" style="visibility: visible;margin-left: 20px; ">
                            <script type="text/rocketscript" data-rocketoptimized="true">
                                jQuery(document).ready(function($) {
                                var $container = jQuery('#portfolio-grid'),
                                filters = {},
                                items_count = jQuery(".portfolio_item").size();

                                $container.imagesLoaded( function(){	
                                setColumnWidth();
                                $container.isotope({
                                itemSelector : '.portfolio_item',
                                hiddenClass : 'portfolio_hidden',
                                resizable : false,
                                transformsEnabled : true,
                                layoutMode: 'fitRows'
                                });		
                                });

                                function getNumColumns(){

                                var $folioWrapper = jQuery('#portfolio-grid').data('cols');

                                if($folioWrapper == '1col') {
                                var winWidth = jQuery("#portfolio-grid").width();		
                                var column = 1;		
                                return column;
                                }

                                if($folioWrapper == '2cols') {
                                var winWidth = jQuery("#portfolio-grid").width();		
                                var column = 2;		
                                if (winWidth<380) column = 1;
                                return column;
                                }

                                else if ($folioWrapper == '3cols') {
                                var winWidth = jQuery("#portfolio-grid").width();		
                                var column = 3;		
                                if (winWidth<380) column = 1;
                                else if(winWidth>=380 && winWidth<788)  column = 2;
                                else if(winWidth>=788 && winWidth<1160)  column = 3;
                                else if(winWidth>=1160) column = 3;
                                return column;
                                }

                                else if ($folioWrapper == '4cols') {
                                var winWidth = jQuery("#portfolio-grid").width();		
                                var column = 4;		
                                if (winWidth<380) column = 1;
                                else if(winWidth>=380 && winWidth<788)  column = 2;
                                else if(winWidth>=788 && winWidth<1130)  column = 3;
                                else if(winWidth>=1130) column = 4;		
                                return column;
                                }
                                }

                                function setColumnWidth(){
                                var columns = getNumColumns();		

                                var containerWidth = jQuery("#portfolio-grid").width();		
                                var postWidth = containerWidth/columns;
                                postWidth = Math.floor(postWidth);

                                jQuery(".portfolio_item").each(function(index){
                                jQuery(this).css({"width":postWidth+"px"});				
                                });
                                }

                                function arrange(){
                                setColumnWidth();		
                                $container.isotope('reLayout');	
                                }

                                jQuery(window).on("debouncedresize", function( event ) {	
                                arrange();		
                                });


                                // Filter projects
                                $('.filter a').click(function(){
                                var $this = $(this).parent('li');
                                // don't proceed if already active
                                if ( $this.hasClass('active') ) {
                                return;
                                }

                                var $optionSet = $this.parents('.filter');
                                // change active class
                                $optionSet.find('.active').removeClass('active');
                                $this.addClass('active');

                                var selector = $(this).attr('data-filter');
                                $container.isotope({ filter: selector });

                                var hiddenItems = 0,
                                showenItems = 0;
                                jQuery(".portfolio_item").each(function(){
                                if ( jQuery(this).hasClass('portfolio_hidden') ) {
                                hiddenItems++;
                                };
                                });

                                showenItems = items_count - hiddenItems;
                                if ( ($(this).attr('data-count')) > showenItems ) {				
                                jQuery(".pagination__posts").css({"display" : "block"});
                                } else {
                                jQuery(".pagination__posts").css({"display" : "none"});
                                }
                                return false;
                                });
                                });
                            </script>
                            
                            <li class="portfolio_item projects-category-2  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/lagre/vietan1.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/lagre/vietan1.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="http://vietancorp.vn/">Việt An camera</a></h3>
                                        <p class="excerpt">Chuyên mua bán các thiết bị camera quan sát, đầu ghi hình, báo động, báo cháy,...
    Với phương châm "Uy tín... </p>
                                        
                                    </div> 
                                </div>
                            </li>
                            
                           
                            <li class="portfolio_item projects-category-1  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/lagre/lahava.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/lagre/lahava.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="http://lahava.vn/">Lahava Áo cưới</a></h3>
                                        <p class="excerpt">Được thành lập vào năm 2010,chúng tôi sau vài năm đã từng bước khẳng định vị trí của mình trên thị ... </p>
                                        
                                    </div> 
                                </div>
                            </li>
                            
                            <li class="portfolio_item projects-category-1  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/lagre/banvai.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/banvai.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="banvai.vn">Hoa Mai</a></h3>
                                        <p class="excerpt"> Hoa Mai - đại lý sỉ và lẻ vải may balo - túi xách, giày, nón bảo hiểm...</p>
                                        
                                    </div> 
                                </div>
                            </li>
                            <li class="portfolio_item projects-category-1  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/lagre/trangmuasam1.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/trangmuasam.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="http://trangmuasam.com.vn/">Trangmuasam.com.vn</a></h3>
                                        <p class="excerpt">Với cùng khoản chi phí bạn có thể ngồi tại nhà, tại văn  phòng làm việc mà vẫn có thể mua được nhiều hơn, tiết kiệm hơn những sản phẩm và dịch vụ ăn uống, làm đẹp, mua sắm, giải trí, du lịch.. </p>
                                        
                                    </div> 
                                </div>
                            </li>
							
							
							
							<li class="portfolio_item projects-category-1  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/layhang.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/layhang.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="http://layhang.org">Layhang.org</a></h3>
                                        <p class="excerpt">Lấy hàng Quảng Châu, dịch vụ mua và vận chuyển hàng Trung Quốc </p>
                                        
                                    </div> 
                                </div>
                            </li>
							
							<li class="portfolio_item projects-category-1  accusantium alias consectetur  isotope-item" style="width: 376px;  ">
                                <div class="portfolio_item_holder">
                                    <figure class="thumbnail thumbnail__portfolio">
                                        <a class="image-wrap" href="img/duan/nhommua.png" rel="prettyPhoto[gallery2]" title="Slideshow Format"><img style="width: 356px; height: 225px;" src="img/duan/nhommua.png" alt="Slideshow Format"><span class="zoom-icon"></span></a>
                                    </figure>
                                    

                                    <div class="caption caption__portfolio">
                                        <h3><a target="_blank" href="http://nhommua24h.vn">Nhommua24h.vn</a></h3>
                                        <p class="excerpt">Cung cấp các loại vật dụng, thời trang, balo, túi xách... với giá hấp dẩn. </p>
                                        
                                    </div> 
                                </div>
                            </li>
                            
                        </ul>
                        <div class="pagination pagination__posts"><ul><li class="active"><a href=""></a></li><li><a href="#" class="inactive"></a></li></ul></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>